{% extends "base.html" %}{% load i18n crm_tags %}
{% block title %}{% translate "Contacts" %}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <h1>{% translate "Contacts" %}</h1>
    <p>{% blocktranslate trimmed count n=total %}{{ n }} person{% plural %}{{ n }} people{% endblocktranslate %}{% if page.paginator.count != total %}, {% blocktranslate trimmed with shown=page.paginator.count %}{{ shown }} shown{% endblocktranslate %}{% endif %}</p>
  </div>
  <div class="actions">
    {% if user.is_supervisor %}<a class="btn" href="{% url 'export' 'contacts' %}">{% translate "Download all (CSV)" %}</a>{% endif %}
    <a class="btn btn-primary" href="{% url 'contact_create' %}">{% translate "Add contact" %}</a>
  </div>
</div>

<div class="filters">
  <form method="get" role="search">
    <label class="sr-only" for="cq">{% translate "Search contacts" %}</label>
    <input id="cq" type="search" name="q" value="{{ q }}" placeholder="{% translate 'Name, number, place or home cell' %}">
    <label class="sr-only" for="cs">{% translate "Status" %}</label>
    <select id="cs" name="status" data-autosubmit>
      <option value="">{% translate "Everyone" %}</option>
      {% for value, label in statuses %}<option value="{{ value }}"{% if value == status %} selected{% endif %}>{{ label }}</option>{% endfor %}
    </select>
    <label class="sr-only" for="cr">{% translate "Region" %}</label>
    <select id="cr" name="region" data-autosubmit>
      <option value="">{% translate "All regions" %}</option>
      {% for r in regions %}<option value="{{ r }}"{% if r == region %} selected{% endif %}>{{ r }}</option>{% endfor %}
    </select>
    {% if mine %}<input type="hidden" name="mine" value="1">{% endif %}
    <button class="btn" type="submit">{% translate "Search" %}</button>
  </form>
  <div class="seg" aria-label="{% translate 'Whose contacts' %}">
    <a href="{% url_with mine='' %}"{% if not mine %} aria-current="true"{% endif %}>{% translate "Everyone’s" %}</a>
    <a href="{% url_with mine='1' %}"{% if mine %} aria-current="true"{% endif %}>{% translate "In my care" %}</a>
  </div>
</div>

{% if page.object_list %}
<div class="table-wrap">
  <table>
    <thead><tr><th>{% translate "Name" %}</th><th>{% translate "Phone" %}</th><th class="hide-sm">{% translate "Status" %}</th><th class="hide-sm">{% translate "Location" %}</th><th class="hide-sm">{% translate "Care agent" %}</th><th class="hide-sm">{% translate "Last call" %}</th></tr></thead>
    <tbody>
    {% for c in page %}
      <tr>
        <td><a class="title" href="{{ c.get_absolute_url }}">{{ c.name }}</a>{% if c.do_not_call %} <span class="pill dnc">{% translate "Do not call" %}</span>{% endif %}</td>
        <td class="phone nowrap">{{ c.phone_display }}</td>
        <td class="hide-sm"><span class="pill s-{{ c.status }}">{{ c.get_status_display }}</span></td>
        <td class="hide-sm">{{ c.location|default:"—" }}</td>
        <td class="hide-sm">{{ c.care_agent.display_name|default:"—" }}</td>
        <td class="hide-sm muted nowrap">{% if c.last_call %}{{ c.last_call|when }}{% else %}{% translate "Never" %}{% endif %}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% include "_pager.html" %}
{% else %}
<div class="panel empty"><strong>{% translate "No contacts match." %}</strong>{% translate "Try part of the name, or the last digits of the number." %}</div>
{% endif %}
{% endblock %}